<template>
    <div class="home">
        <header class="tc">
            <div class="title pr pr20 pl20">
                <router-link to="/using/message">
                    <img class="pa" src="../../assets/img/home-img/message.png">
                </router-link>
                <h1 class="f35 cfff fn">首页</h1>
            </div>
        </header>
        <nav class="nav ml20 mr20">
            <div class="search   bcfff  bs flex jcsb f25 mb65">
                <div>
                    <router-link to="/selectCity" class="mr20">
                        <img class="location" src="../../assets/img/home-img/location.png">
                    </router-link>
                    <input type="text" v-model.trim = "location">
                </div>
                <div style="color: #2b7df4;" @click="onRefresh">
                    <a href="#" class="mr10">
                        <img class="refrech" src="../../assets/img/home-img/refresh.png">
                    </a>
                    刷新
                </div>
            </div>
           <ul class="menu bcfff flex jcsb tc f28">
                <li>
                    <router-link to="/repair">
                        <div class="repair img"></div>
                        车辆维修
                    </router-link>  
                </li>
                <li>
                    <router-link to="/keepIndex">
                        <div class="up-keep img"></div>
                        汽车保养
                    </router-link>
                </li>
                <li>
                    <router-link to="/wash">
                        <div class="wash-car img"></div>
                        专业洗车
                    </router-link>
                </li>
                <li>
                    <router-link to="/refuel/refuelList">
                        <div class="refuel img"></div>
                        就近加油
                    </router-link>
                </li>
           </ul>
        </nav>
        <main class="p20">
            <section class="main-station bcfff mb20">
                <div class="wrap flex jcsb aic mb20">
                    <div>
                        <h1 class="f35 fn mb20">附近加油站</h1>
                        <p class="f23 c80">根据您的位置推荐最近的加油站</p>
                    </div>
                    <router-link class="f25" to="/refuel/refuelList">更多 ></router-link>
                </div>
                <div class="content" id="map1"></div>
            </section>
            <section class="main-buy bcfff mb20 oh">
                <div class="wrap flex jcsb aic  ">
                    <div>
                        <h1 class="f35 fn mb20">优惠团购</h1>
                        <p class="f23 c80">钜惠袭来为您的爱车续航</p>
                    </div>
                    <router-link class="f25" to="/using/discounts">更多 ></router-link>
                </div>
                <div class="discounts mt25" v-for="el in dataArr" :key="el.id">
                    <img class="mb20" :src="el.image" @click="goDetails(el.id)">
                    <div class="">
                        <span class="f25">{{ el.content }}</span>
                    </div>
                </div>
            </section>
        </main>
        <ul class="footer  flex pf w100 jcsa f20 aic">
            <li class="fg1">
                <router-link to="/home"  class="flex fdc img aic">
                    <img src="../../assets/img/home-img/home.png">
                    <span class="active">首页</span>
                </router-link >
            </li>
            <li>
                <router-link to="/rescueIndex" style="background-color: skyblue;">
                    <div class="rescue pr">
                        <img class="pa" src="../../assets/img/home-img/rescue.png">
                    </div>
                </router-link >
            </li>
            <li class="fg1">
                <router-link to="/mine" class="flex fdc img1 aic">
                    <img src="../../assets/img/home-img/mine.png">
                    <span>我的</span>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
import {groupBuying} from '@/api/using';
export default {
    data() {
        return {
            location:"焦作市山阳区",
            dataArr: []
        }
    },
    methods: {
        init() {
            this.initMap();//初始化地图
            //优惠团购
            groupBuying().then(r => {
                this.dataArr = r.data;
                this.dataArr.splice(4,);//截取4张图
            }).catch(e => {
            })
        },
        initMap(){
            // 按住鼠标右键，修改倾斜角和角度
            var map = new BMapGL.Map("map1");    // 创建Map实例
            // 初始化地图,设置中心点坐标和地图级别     113.578744,34.809352
            map.centerAndZoom(new BMapGL.Point(113.701303, 34.786951), 14);
            // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            var myIcon = new BMapGL.Icon(require('../../assets/img/car-repair-img/stores-tab.png'), new BMapGL.Size(20, 30), {
                anchor: new BMapGL.Size(10, 30),
            });
            var point = new BMapGL.Point(113.701303, 34.786951);
            // 创建标注对象并添加到地图  
            var marker = new BMapGL.Marker(point, { icon: myIcon });
            map.addOverlay(marker);
        },
        goDetails(id){
            this.$router.push({
                path: '/using/offerDetails',
                query: {
                    id: id
                }
            })
        },
        onRefresh(){
            this.location = "焦作市山阳区";
        }
    },
    mounted(){
        this.init();//页面初始化
    }
}
</script>
<style scoped>
input{border: 0;height: 32rem;width: 440rem;font-size: 25rem;}
a{color: #333;}
.home{background-color: #f7f7f7;}
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header{height:400rem;background: url(../../assets/img/home-img/bg.png) no-repeat;background-size: 100% auto;}
header  img{height: 36rem;width: auto;left: 20rem;top: 50%;margin-top: -18rem;}
/* 导航样式 */
.nav{margin-top: -255rem;}
.nav .search{border-radius: 42.5rem;line-height: 35rem;padding: 25rem 40rem;}
.nav .search img{vertical-align: middle;margin-top: -5rem;}
.nav .search img.location{height: 34rem;width: auto;}
.nav .search img.refrech{height: auto;width: 25rem;}
/* 导航功能模块 */
.nav .menu{padding: 53rem 33rem;border-radius: 33rem;}
.nav .menu li div.img{height: 110rem;width: 110rem; border-radius: 20rem;padding: 20rem;box-sizing: border-box;margin-bottom: 30rem;background-size: 60rem auto;background-position: 50% 50%;background-repeat: no-repeat; }
.nav .menu li div.repair{background-image: url(../../assets/img/home-img/repair.png);background-color: #497ff6;background-size: 80rem auto;}
.nav .menu li div.up-keep{background-image: url(../../assets/img/home-img/up-keep.png);background-color: #ffb03a; }
.nav .menu li div.wash-car{background-image: url(../../assets/img/home-img/wash-car.png);background-color: #69de2c; }
.nav .menu li div.refuel{ background-image: url(../../assets/img/home-img/refuel-gun.png);background-color: #4990fc;}
/* 首页主要内容 */
/* main{margin-bottom: 180rem;} */
main{margin-bottom: 150rem;}
main section{padding: 40rem 20rem;border-radius: 20rem;box-sizing: border-box;}
main section.main-station .content {height: 375rem;}
main .discounts:nth-child(2n){margin-right:25rem ;}
main .discounts{width:320rem;height: 200rem; float: left;margin-bottom: 60rem;}
main .discounts img {width: 100%;height: 100%;}
main .discounts span {display:inline-block;width:230rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 页脚可复用 */
ul.footer{height: 115rem;left: 0; bottom:0;background: url(../../assets/img/home-img/rectangle.png) no-repeat;background-size:100% 100%;}
ul.footer li a.img{text-align: center;}
ul.footer li a.img img{height: 35rem;width: auto;}
ul.footer li a.img1 img{height: auto;width: 34rem;}
/* 被选中的颜色active */
ul.footer li a.img span.active{color: #2b7df4;}
ul.footer li a div.rescue{height: 115rem;width: 115rem; background: url(../../assets/img/wash-car-img/round-red.png) no-repeat;background-size:100% 100%;bottom: 50rem;}
ul.footer li a div.rescue img{top: 50%;left: 50%;transform: translate(-50%,-50%);width: 45rem;height: auto;}
</style>